<%@page contentType="text/html" pageEncoding="UTF-8" %>
<% String HTML_ATTR_NAME="user_id"; %>
<script>

    //当点击删除图片的时候调用
    function deleteRow(img) {
        //出对话框，让用户确认是否删除
        var id = $(img).attr("<%=HTML_ATTR_NAME%>");
        $("#dialog").attr("<%=HTML_ATTR_NAME%>", id);
        $("#dialog").modal("show");
    }

    //点了对话框中的确定删除按钮
    function executeDel() {
        var id = $("#dialog").attr("<%=HTML_ATTR_NAME%>");
        //关掉对话框
        $("#dialog").modal("hide");
        //导航到删除页面
        $.getJSON("/api/main/deluser",
                {
                    id:id
                },
                function (json,status) {
                    var r=json.deleId;
                    var obj=$("#"+r);
                    $("#"+r).remove();
                }
        );
    }

    //点了对话框中的不删按钮
    function cancelDel() {
        //关掉对话框
        $("#dialog").modal("hide");
    }
</script>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core" %>
    <title>后台管理</title>
    <%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core"%>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <script src="../js/jquery-1.12.4.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <style>
        .container input {
            width: 100%;
        }

        .container div {
            margin: 5px 0px;
            outline: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <label class="navbar-brand">超贝订餐助手</label>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><a href="/Manager/back">退出登录</a></li>
            <li><a href="/Manager/main">订单管理</a></li>
            <li><a href="/Manager/man">员工管理</a></li>
            <li class="active"><a>用户管理</a></li>
            <li ><a href="/Manager/food">菜品管理</a></li>
        </ul>
    </div>
</nav>
<div class="container">
    <table class="table tab-striped">
    <theda>
        <tr>
            <th>ID</th>
            <th>账号</th>
            <th>姓名</th>
            <th>电话</th>
            <th>地址</th>
        </tr>
    </theda>
        <tbody>
        <jstl:forEach items="${users}" var="use">
        <tr id="${use.id}">
            <td>${use.id}</td>
            <td>${use.name}</td>
            <td>${use.realname}</td>
            <td>${use.phone}</td>
            <td>${use.address}</td>
            <td><img <%=HTML_ATTR_NAME%>='${use.id}' onclick='deleteRow(this)' src='../img/del.png'/></td>
            <td><a href="/Manager/modifyUser?modifyuserid=${use.id}"><img src='../img/modify.png'/></a></td>
            </tr>
        </jstl:forEach>
        </tbody>
    </table>
    </div>
    <div class="row">
        <div class="col-md-10"><a href="/Manager/adduser">添加用户</a></div>
        <%--下面的语句相当于if和else，英文不好的自己查词典--%>
        <jstl:choose>
            <jstl:when test="${page_pre_index == null}">
                <div class="col-md-1">上一页</div>
            </jstl:when>
            <jstl:otherwise>
                <div class="col-md-1"><a href="/Manager/user?page_start_index=${page_pre_index}">上一页</a></div>
            </jstl:otherwise>
        </jstl:choose>
        <jstl:choose>
            <jstl:when test="${page_next_index>=Lenth}">
                <div class="col-md-1">下一页</div>
            </jstl:when>
            <jstl:otherwise>
                <div class="col-md-1"><a href="/Manager/user?page_start_index=${page_next_index}">下一页</a></div>            </jstl:otherwise>
        </jstl:choose>
</div>
<div>
    <div class="modal fade" id="dialog" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        警告
                    </h4>
                </div>
                <div class="modal-body">
                    你确定要删除这个用户吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="cancelDel()">
                        不
                    </button>
                    <button type="button" class="btn btn-primary" onclick="executeDel()">
                        删吧，别废话
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
</body>
</html>
